<template>
    <div class="col card p10">
        <label style="text-align: center;" class="title">水泵控制</label>
        <el-switch
            @click="onClickP1"
            active-text="水泵1"
            v-model="ctx.p1"/>
        <el-switch
            @click="onClickP2"
            active-text="水泵2"
            v-model="ctx.p2"/>
        <el-switch
            @click="onClickP3"
            active-text="水泵3"
            v-model="ctx.p3"/>
    </div>
</template>

<script setup lang="ts">

import { computed, reactive, watch } from 'vue';
import { heatState } from '../../service/heat_def';
import { sw_ctrl } from '../../service/heat_cmd';
import { dialog } from '../../service/ui';

interface Ctx {
    p1: boolean,
    p2: boolean,
    p3: boolean,
}

const ctx = reactive<Ctx>({
    p1: heatState.ctrl.p1,
    p2: heatState.ctrl.p2,
    p3: heatState.ctrl.p3,
})

watch(() => heatState.ctrl, ()=>{
    ctx.p1 = heatState.ctrl.p1;
    ctx.p2 = heatState.ctrl.p2;
    ctx.p3 = heatState.ctrl.p3;
});

async function ctrl(id: number, v: boolean) {
    try {
        await sw_ctrl(id, v);
    } catch (msg) {
        dialog.err(msg);
    }
}


async function onClickP1() {
    ctrl(13, ctx.p1);
}

async function onClickP2() {
    ctrl(14, ctx.p2);
}

async function onClickP3() {
    ctrl(15, ctx.p3);
}

</script>
